<template>
  <Form :data="model" @ok="onOk">
    <FormItem field="projectId" title="项目" required>
      <Select v-model="model.projectId" :disabled="Boolean(model?.id)" :load="allProjects" />
    </FormItem>
    <FormItem field="name" title="全称" required>
      <Input v-model="model.name" />
    </FormItem>
    <FormItem field="shortName" title="简称" required>
      <Input v-model="model.shortName" />
    </FormItem>
    <FormItem field="frontUrl" title="前端地址">
      <Input v-model="model.frontUrl" />
    </FormItem>
    <FormItem field="backUrl" title="后端地址">
      <Input v-model="model.backUrl" />
    </FormItem>
    <FormItem field="key" title="Key" required>
      <Input v-model="model.key" />
    </FormItem>
    <FormItem field="remark" title="备注">
      <Input v-model="model.remark" />
    </FormItem>
    <template #op>
      <ModalButton :loading="loading" />
    </template>
  </Form>
</template>

<script setup lang="ts">
import { Form, FormItem, Input, Message, ModalButton, Select } from '@idmy/ui'
import { allProjects, createOrUpdateApp } from './services'

defineOptions({ name: 'AppCreate' })
const props = defineProps({ model: Object })

const model = reactive(props.model || {})

const [onOk, loading] = useLoading(async () => {
  await createOrUpdateApp(model)
  Message.success('保存成功')
  Modal.ok(model)
})
</script>
